<template>
  <div>
    <div id="container">
      <el-select
        v-model="value"
        placeholder="请选择"
        clearable
        :multiple="true"
        @change="handleChange"
      >
        <el-option
          v-for="item of options"
          :key="item.userId"
          :label="item.userName"
          :value="item.userName">
        </el-option>
      </el-select>
      <el-card>
        <div
          v-loading="loading"
          id="myChart"
          :style="{width: '100%', height: '800px'}"
        ></div>
      </el-card>

    </div>
  </div>
</template>

<script>
import { requestDataOfDrawPoint, requestTrendChartsData } from '../../../api/system/map'
import axios from 'axios'
import { listUser } from '../../../api/system/user'
import log from '../../monitor/job/log'

export default {
  name: 'index',
  data() {
    return {
      testTrendChartsArray: [],
      // 多选下拉框绑定的值！
      value: [],
      // 下拉框绑定的内容数组对象！
      options: [],
      msg: 'Welcome to Your Vue.js App',
      getAddVisitList: {
        beginTime: '',
        endTime: ''
      },
      visitCount: [],
      zheXianGather: {
        visitCount0: [],
        visitCount1: [],
        visitCount2: [],
        visitCount3: [],
        visitCount4: [],
        visitCount5: [],
        visitCount6: [],
        visitCount7: [],
        visitCount8: [],
        visitCount9: [],
        visitCount10: [],
        visitPersonName: {
          c0N: '',
          c1N: '',
          c2N: '',
          c3N: '',
          c4N: '',
          c5N: '',
        },
        v1: [9, 9, 9, 9, 9, 9, 9],
        v2: [11, 11, 11, 11, 11, 11, 11],
        v3: [15, 15, 15, 15, 15, 15, 15],
        v4: [19, 19, 19, 19, 19, 19, 19],
        v5: [23, 23, 23, 23, 23, 23, 23],
        c0: [],
        c1: [],
        c2: [],
        c3: [],
        c4: [],
      },
      testPerson: 'lvhanghmm',
      // 遮罩层
      loading: true
    }
  },
  created() {
    this.requestSelectListData()
    this.testanniu()
    // console.log(this.$route.query.lvhanghmm)
    // console.log(this.$route.query.visitPerson1)
    setTimeout(res => {
      this.loading = true
      this.drawLine()
      this.loading = false
    }, 1900)

    // this.drawLine()
  },
  methods: {
    // 多选模式下移除tag时触发【】
    handleRemoveTag(e) {
      console.log(e)
    },
    // 下拉框出现/隐藏时触发【】
    handleVisibleChange(e) { // 结果是布尔值！
      console.log('出现and隐藏', e)
    },
    // 当下拉框的input框失去焦点时触发【】
    handleBlur(e) {
      console.log('blur', e)
    },
    // 当下拉框选中值发生变化时触发
    async handleChange(e) {
      this.loading = true

      console.log(e)
      //   e.forEach(item => {
      //     console.log(item)
      //   })

      let qiTian = this.Get_the_time_array_of_the_last_seven_days()
      console.log(qiTian)

      let zheXian,
        newTrendChartsArr = [],
        newTrendChartsArr1 = [],
        newTrendChartsArr2 = [],
        newTrendChartsArr3 = [],
        newTrendChartsArr4 = []


      for (let i = 0; i < e.length; i++) {
        for (let j = 0; j < qiTian.length; j++) {
          zheXian = await requestDataOfDrawPoint({
            isVisit: '1',
            visitPerson: e[i],
            visitTime: qiTian[j]
            // beginTime: this.getAddVisitList.beginTime,
            // endTime: this.getAddVisitList.endTime
          })
          if (i === 0) {
            newTrendChartsArr.push(zheXian.total)
          } else if (i === 1) {
            newTrendChartsArr1.push(zheXian.total)
          } else if (i === 2) {
            newTrendChartsArr2.push(zheXian.total)
          } else if (i === 3) {
            newTrendChartsArr3.push(zheXian.total)
          } else if (i === 4) {
            newTrendChartsArr4.push(zheXian.total)
          } else {
          }
        }
      }

      // console.log('外部的new', newTrendChartsArr)
      // console.log('外部的new', newTrendChartsArr1)
      // console.log('外部的new', newTrendChartsArr2)
      // console.log('外部的new', newTrendChartsArr3)
      // console.log('外部的new', newTrendChartsArr4)

      this.zheXianGather.c0 = newTrendChartsArr
      this.zheXianGather.c1 = newTrendChartsArr1
      this.zheXianGather.c2 = newTrendChartsArr2
      this.zheXianGather.c3 = newTrendChartsArr3
      this.zheXianGather.c4 = newTrendChartsArr4

      this.zheXianGather.visitPersonName.c0N = e[0]
      this.zheXianGather.visitPersonName.c1N = e[1]
      this.zheXianGather.visitPersonName.c2N = e[2]
      this.zheXianGather.visitPersonName.c3N = e[3]
      this.zheXianGather.visitPersonName.c4N = e[4]

      this.drawLine()
      this.loading = false
    },
    // 请求下拉列表的数据
    async requestSelectListData() {
      const res = await listUser()
      // console.log(res)
      const res2 = res.rows
      this.options = res2
    },
    drawLine() {
        const myChart = this.$echarts.init(document.getElementById('myChart'))

        const arr = this.Get_the_time_array_of_the_last_seven_days()
        console.log(arr)
        // console.log('drawLine中的arr【没有进行倒序排列！】', arr)

        const option = {
          title: {
            text: `拜访人近七天拜访趋势`,
            textStyle: {}
          },
          tooltip: {
            trigger: 'axis' //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
          },
          xAxis: {
            type: 'category',//类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
            name: '日期',//坐标轴名称
            boundaryGap: false,
            data: arr,
            nameGap: 7, // 坐标轴名称与轴线之间的距离。
            axisTick: { // 是否显示坐标轴刻度。
              inside: true // 坐标轴刻度是否朝内，默认朝外。
            }
          },
          yAxis: {
            type: 'value',
            name: '次数',
            splitLine: {
              show: false // 是否显示分隔线。默认数值轴显示，类目轴不显示。
            },
            nameGap: 15,
            axisTick: {
              inside: true
            }
          },
          series: [
            // 第一个用户
            {
              type: 'line', // 线条
              name: `${this.zheXianGather.visitPersonName.c0N}`, // 系列名称，用于tooltip的显示
              // this.visitCount.reverse()
              // 纵轴上面展示的数据
              data: this.zheXianGather.c0,
              symbol: 'circle', // 标记的类型：圆圈
              itemStyle: {
                normal: {
                  shadowBlur: 50, // 文字块的背景阴影长度。
                  shadowColor: 'red', // 文字块的背景阴影颜色。
                  color: 'red', // 图形的颜色
                  lineStyle: {
                    color: '#1B9CFC', // 线的颜色
                    width: 5 // 线的宽度
                  }
                }
              }
            },
            // 第二个用户的折线图
            {
              type: 'line', // 线条
              name: `${this.zheXianGather.visitPersonName.c1N}`, // 系列名称，用于tooltip的显示
              // this.visitCount.reverse()
              // 纵轴上面展示的数据
              data: this.zheXianGather.c1,
              symbol: 'circle', // 标记的类型：圆圈
              itemStyle: {
                normal: {
                  shadowBlur: 50, // 文字块的背景阴影长度。
                  shadowColor: 'red', // 文字块的背景阴影颜色。
                  color: 'red', // 图形的颜色
                  lineStyle: {
                    color: '#EAB543', // 线的颜色
                    width: 5 // 线的宽度
                  }
                }
              }
            },
            // 第三个用户的折线图
            {
              type: 'line', // 线条
              name: `${this.zheXianGather.visitPersonName.c2N}`, // 系列名称，用于tooltip的显示
              // this.visitCount.reverse()
              // 纵轴上面展示的数据
              data: this.zheXianGather.c2,
              symbol: 'circle', // 标记的类型：圆圈
              itemStyle: {
                normal: {
                  shadowBlur: 50, // 文字块的背景阴影长度。
                  shadowColor: 'red', // 文字块的背景阴影颜色。
                  color: 'red', // 图形的颜色
                  lineStyle: {
                    color: '#fff200', // 线的颜色
                    width: 5 // 线的宽度
                  }
                }
              }
            },
            // 第四个用户的折线图
            {
              type: 'line', // 线条
              name: `${this.zheXianGather.visitPersonName.c3N}`, // 系列名称，用于tooltip的显示
              // this.visitCount.reverse()
              // 纵轴上面展示的数据
              data: this.zheXianGather.c3,
              symbol: 'circle', // 标记的类型：圆圈
              itemStyle: {
                normal: {
                  shadowBlur: 50, // 文字块的背景阴影长度。
                  shadowColor: 'red', // 文字块的背景阴影颜色。
                  color: 'red', // 图形的颜色
                  lineStyle: {
                    color: '#FC427B', // 线的颜色
                    width: 5 // 线的宽度
                  }
                }
              }
            },
            // 第五个用户的折线图
            {
              type: 'line', // 线条
              name: `${this.zheXianGather.visitPersonName.c4N}`, // 系列名称，用于tooltip的显示
              // this.visitCount.reverse()
              // 纵轴上面展示的数据
              data: this.zheXianGather.c4,
              symbol: 'circle', // 标记的类型：圆圈
              itemStyle: {
                normal: {
                  shadowBlur: 50, // 文字块的背景阴影长度。
                  shadowColor: 'red', // 文字块的背景阴影颜色。
                  color: 'red', // 图形的颜色
                  lineStyle: {
                    color: '#9AECDB', // 线的颜色
                    width: 5 // 线的宽度
                  }
                }
              }
            },
            // 第六个用户的折线图
            {
              type: 'line', // 线条
              name: `${this.zheXianGather.visitPersonName.c5N}`, // 系列名称，用于tooltip的显示
              // this.visitCount.reverse()
              // 纵轴上面展示的数据
              data: [],
              symbol: 'circle', // 标记的类型：圆圈
              itemStyle: {
                normal: {
                  shadowBlur: 50, // 文字块的背景阴影长度。
                  shadowColor: 'red', // 文字块的背景阴影颜色。
                  color: 'red', // 图形的颜色
                  lineStyle: {
                    color: '#D6A2E8', // 线的颜色
                    width: 5 // 线的宽度
                  }
                }
              }
            }
          ]

        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)


    },

    // 获取最近七天的时间数组【抽取出来的公共函数!】
    Get_the_time_array_of_the_last_seven_days() {
      const arr = [] // 用来存放最近七天的时间
      function getBeforeDate(n1) {
        let n = n1
        console.log(n)//
        let d = new Date()
        let year = d.getFullYear()
        let mon = d.getMonth() + 1
        let day = d.getDate()
        if (day <= n) {
          if (mon > 1) {
            mon = mon - 1
          } else {
            year = year - 1
            mon = 12
          }
        }
        d.setDate(d.getDate() + n) //很重要，+n取得是前一天的时间
        year = d.getFullYear()
        mon = d.getMonth() + 1
        day = d.getDate()
        let s = (year) + '-' + (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day)
        return s
      }

      for (let i = 0; i > -7; i--) {
        arr.push(getBeforeDate(i))
      }

      const qiTian = arr.reverse() // 获取最近的七天时间
      this.getAddVisitList.beginTime = qiTian[0]
      this.getAddVisitList.endTime = qiTian[6]

      return arr, qiTian

    },

    async testanniu() {

      const a = this.Get_the_time_array_of_the_last_seven_days()
      const res = a.reverse()
      this.getAddVisitList.beginTime = res[0]
      this.getAddVisitList.endTime = res[6]

      //
      // const { data: res2 } = await this.$http.get('system/adress/getAddVisitList', {
      //   params: this.getAddVisitList,
      // })
      //
      // console.log('拜访人近七天的拜访次数', res2)
      // console.log('拜访人近七天的时间', res2.date)

      // console.log('最近的七天时间', res)

      let _t1 = performance.now()

      const newArr = []
      for (let i = 0; i < res.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: this.$route.query.visitPerson1,
          visitTime: res[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr.push(zheXian.total)

      }
      // console.log(newArr)
      this.visitCount = newArr
      let _t2 = performance.now()
      console.log(_t2 - _t1)
      // this.visitCount = res2.num.reverse()

    },
    async testAnNiu2() {

      // console.log('七天', qiTian)
      const { rows: res } = await listUser()
      const userArr = [] // 空数组用来保存遍历到的用户名！
      for (let i = 0; i < res.length; i++) { // 把遍历到的用户名压进数组中
        userArr.push(res[i].userName)
      }

      // console.log(userArr)
      // 遍历数组
      userArr.forEach((item, index, array) => { // item是数组中每一项的值
        console.log(item)
        // console.log(index)
        // console.log(array)
      })

      const newArr0 = []
      const newArr1 = []
      const newArr2 = []
      const newArr3 = []
      const newArr4 = []
      const newArr5 = []
      const newArr6 = []
      const newArr7 = []
      const newArr8 = []
      const newArr9 = []
      const newArr10 = []
      // const newArr11 = []

      let _t1 = performance.now()

      // 第一个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[0], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr0.push(zheXian.total)

      }

      // 第二个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[1], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr1.push(zheXian.total)

      }

      // 第san个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[2], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr2.push(zheXian.total)

      }

      // 第si个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[1], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr3.push(zheXian.total)

      }

      // 第wu个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[1], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr4.push(zheXian.total)

      }

      // 第liu个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[1], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr5.push(zheXian.total)

      }

      // 第qi个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[1], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr6.push(zheXian.total)

      }

      // 第ba个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[1], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr7.push(zheXian.total)

      }

      // 第jiu个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[1], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr8.push(zheXian.total)

      }

      // 第shi个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[1], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr9.push(zheXian.total)

      }

      // 第shiyi个用户
      for (let i = 0; i < qiTian.length; i++) {
        // console.log(res[i])

        const zheXian = await requestDataOfDrawPoint({
          isVisit: '1',
          visitPerson: userArr[1], // admin
          visitTime: qiTian[i]
        })
        // console.log('zhexianresponse', zheXian)
        newArr10.push(zheXian.total)

      }

      console.log(newArr0, '第一个用户')
      console.log(newArr1, '第er个用户')
      console.log(newArr2, '第san个用户')
      console.log(newArr3, '第si个用户')
      console.log(newArr4, '第wu个用户')
      console.log(newArr5, '第liu个用户')
      console.log(newArr6, '第qi个用户')
      console.log(newArr7, '第ba个用户')
      console.log(newArr8, '第jiu个用户')
      console.log(newArr9, '第shi个用户')
      console.log(newArr10, '第shiyi个用户')

      let _t2 = performance.now()
      console.log(_t2 - _t1)

      // const usreList = await listUser({
      //   admin:'false'
      // })
      // console.log(usreList)
      // this.visitCount = newArr
      // this.drawLine()

      // const zheXian = await requestDataOfDrawPoint({
      //   isVisit: '1',
      //   visitPerson: userArr[0],
      //   beginTime: this.getAddVisitList.beginTime,
      //   endTime: this.getAddVisitList.endTime
      // })
      // console.log('zhexianresponse', zheXian)
      // newArr.push(zheXian.total)
      // console.log(newArr)

    }
  }
}
</script>


<style scoped>

</style>
